<template>
  <div class="app-container">
    <!-- 平台信息展示 -->
    <p class="platform-info">当前平台: {{ currentPlatformText }}</p>
    
    <div class="web-layout">
      <!-- 左侧导航栏 - 仅在 Web 端显示在左侧 -->
      <tab-bar v-if="showTabBar && isWeb" class="web-left-bar" />
      
      <!-- 主内容区域 -->
      <router-view class="router-view-content" />
    </div>
    
    <!-- 底部导航栏 - 仅在H5和小程序显示 -->
    <tab-bar v-if="showTabBar && !isWeb" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { isH5, isMpWeixin, getPlatformType } from './utils/platform'
import TabBar from './components/TabBar.vue'

// 当前路由
const route = useRoute()

// 平台文本描述
const currentPlatformText = computed(() => {
  const platform = getPlatformType()
  const map = {
    web: 'PC端Web',
    h5: 'H5移动端',
    'mp-weixin': '微信小程序',
    app: 'App'
  }
  return map[platform] || '未知平台'
})
const isWeb = computed(() => getPlatformType() === 'web')
// 是否显示底部导航
const showTabBar = computed(() => {
  // 仅在H5和小程序显示，且不是登录页
  return (isH5() || isMpWeixin() || isWeb.value) && route.name !== 'Login'
})
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.platform-info {
  padding: 16px;
  text-align: center;
  background-color: #f5f5f5;
  border-bottom: 1px solid #eee;
  height: 50px;
}
.web-layout {
  display: flex;
  flex: 1;
}

.web-left-bar {
  width: 30px;
  height: calc(100vh - 50px); 
  border-right: 1px solid #eee;
}
.router-view-content {
  /* 让右侧内容区域占满剩余宽度 */
  flex: 1; 
  /* 可添加 overflow 处理内容溢出 */
  overflow: auto; 
}

:not(.web-left-bar).tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
